import Taro, { Component, Config } from "@tarojs/taro";
import { View, Input, Picker, Image, Text, Textarea, Form, Button } from "@tarojs/components";
import {inject, observer} from '@tarojs/mobx'
import {toJS} from 'mobx'

import {IStoreProps} from '../../store/Stores'

import {getRuntime,enterpriseQualificationArr,taxTypesArr,projectPriceArr} from '../../utils/common'
import PageFooterInfo from '../../components/PageFooterInfo'
import './index.less'
import './page4_demand.less'
import right from '../../assets/img/right.png'
import PickerArea from "../../components/PickerArea";



// 工程金融中心-工程保函中心
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Page3 extends Component<IHomeProps>{
  constructor(props){
    super(props)
  }

  state = {
    projectName: '', // 项目名称
    projectTypeArr: ['政府投资公建项目','政府投资非公建项目','社会民资商业建设项目','社会民资非盈利建设项目'], // 项目类型,
    projectType: '', // 项目类型,
    area: null, // 项目区域
    areaCode: null, // 区编码
    allAreaCode:'', // 省市区编码
    projectPriceArr: projectPriceArr, // 项目价格
    projectPrice: null, // 项目价格
    companyName: '',  //企业名称
    natureOfTheFirmArr: ['全民所有制企业(即国有企业)','集体所有制企业','联营企业','三资企业','私营企业及其他企业'], //企业性质
    natureOfTheFirm: '', //企业性质
    enterpriseScaleArr: ['1-49人', '50-100人','大于100人'],
    enterpriseScale: '', //企业规模
    enterpriseQualificationArr: enterpriseQualificationArr, //企业资质
    enterpriseQualification: '', //企业资质
    taxTypesArr: taxTypesArr, //纳税类型
    taxTypes: '', //纳税类型
    enterpriseAddress: '', //企业地址
    remarks: '', //备注
    contactsName: '',
    phoneNumnber: '',
    wechatNumber: '',
    qqNumber: '',
    allProvince:[],
    allCity:[],
    provinceIndex: 0,
    cityIndex: 0,
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({title: '发布项目信息'})
    this.getAllProvince()
    this.getAllCity(-1)
  }

  getAllProvince() {
    let { AreaStore } = this.props.stores
    AreaStore.getAllProvinceFromLocal({
      callBack: res => {
        //console.log(res)
        this.setState({
          allProvince: res
        })
      }
    })
  }

  getAllCity(index:number=0) {
    let { AreaStore } = this.props.stores
    AreaStore.getAllCityFromLocal({
      index,
      callBack: res => {
        //console.log(res)
        this.setState({
          allCity: res
        })
      }
    })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  changePicker(field:string,e) {
    // let arr = fie
    this.setState({
      [field]: this.state[field+'Arr'][e.detail.value]
    })
  }


  pickerArea(res) {
    this.setState({
      area: res.province.label+res.city.label+res.distract.label,
      areaCode: res.distract.value,
      allAreaCode:res.province.value+','+res.city.value+','+res.distract.value,
    })
  }

  saveProjectInfo(e) {
    let {projectType,projectPrice,natureOfTheFirm,enterpriseScale,enterpriseQualification,taxTypes,area,areaCode,allAreaCode} = this.state
    let {projectName,companyName,enterpriseAddress,remarks,contactsName,phoneNumnber,wechatNumber,qqNumber} = e.detail.value
    // 数据验证
    if(!projectName){
      getRuntime().showToast('项目名称不能为空~')
      return
    }
    if(!projectType){
      getRuntime().showToast('项目类型不能为空~')
      return
    }
    if(!companyName){
      getRuntime().showToast('公司名称不能为空~')
      return
    }
    if(!contactsName){
      getRuntime().showToast('联系人姓名不能为空~')
      return
    }
    if(!phoneNumnber){
      getRuntime().showToast('联系人电话不能为空~')
      return
    }
    let { FinancialCenterStore } = this.props.stores
    FinancialCenterStore.saveProjectInfo({
      form:{
        projectName,projectType,projectPrice,companyName,natureOfTheFirm,enterpriseScale,enterpriseQualification,taxTypes,area,areaCode,allAreaCode,
        enterpriseAddress,remarks,contactsName,phoneNumnber,wechatNumber,qqNumber
      },
      callback: () => {
        // /pages/finance/finance_success
        getRuntime().navigateTo('/pages/finance/finance_success')
      }
    })
  }

  render() {
    let {projectTypeArr,projectPriceArr,natureOfTheFirmArr,enterpriseScaleArr,enterpriseQualificationArr,taxTypesArr,
          projectType,projectPrice,natureOfTheFirm,enterpriseScale,enterpriseQualification,taxTypes,area,allProvince,allCity
    } = this.state
    return(
      <View className='from-wrap'>

       <Form onSubmit={this.saveProjectInfo.bind(this)}>
         <View className='item-group pt0 pb0'>
           <View className='input-group'>
             <View className='input-name is-require'>项目名称</View>
             <Input className='from-input' placeholderClass='placeholder_class' placeholder='请填写项目名称' name='projectName' />
           </View>
           <View className='input-group '>
             <View className='input-name is-require'>项目类型</View>
             <Picker className='input-picker' mode='selector' name={'projectType'} range={projectTypeArr} onChange={this.changePicker.bind(this, 'projectType')}>
               <View className='tt'>
                 <View className='from-input picker-con' >{projectType}</View>
                 <Image className='drop-down-icon' src={right} />
               </View>
             </Picker>
           </View>

           <View className='input-group '>
             <View className='input-name is-require'>所在地区</View>
             <PickerArea onPicketArea={this.pickerArea.bind(this)} />
           </View>
           <View className='input-group '>
             <View className='input-name is-require'>项目价格</View>
             <Picker className='input-picker' mode='selector' name={'projectPrice'} range={projectPriceArr} onChange={this.changePicker.bind(this,'projectPrice')}>
               <View className='tt'>
                 <View className='from-input picker-con' >{projectPrice}</View>
                 <Image className='drop-down-icon' src={right} />
               </View>
             </Picker>
           </View>
         </View>

         <View className='item-group pt0 pb0'>
           <View className='input-group'>
             <View className='input-name is-require'>企业名称</View>
             <Input className='from-input' name={'companyName'} placeholderClass='placeholder_class' placeholder='请填写企业名称' />
           </View>
           <View className='input-group '>
             <View className='input-name'>企业性质</View>
             <Picker className='input-picker' name={'natureOfTheFirm'} mode='selector' range={natureOfTheFirmArr} onChange={this.changePicker.bind(this,'natureOfTheFirm')}>
               <View className='tt'>
                 <View className='from-input picker-con' >{natureOfTheFirm}</View>
                 <Image className='drop-down-icon' src={right} />
               </View>
             </Picker>
           </View>
           <View className='input-group '>
             <View className='input-name'>企业规模</View>
             <Picker className='input-picker' name={'enterpriseScale'} mode='selector' range={enterpriseScaleArr} onChange={this.changePicker.bind(this,'enterpriseScale')}>
               <View className='tt'>
                 <View className='from-input picker-con' >{enterpriseScale}</View>
                 <Image className='drop-down-icon' src={right} />
               </View>
             </Picker>
           </View>
           <View className='input-group '>
             <View className='input-name'>企业资质</View>
             <Picker className='input-picker' name={'enterpriseQualification'} mode='selector' range={enterpriseQualificationArr} onChange={this.changePicker.bind(this,'enterpriseQualification')}>
               <View className='tt'>
                 <View className='from-input picker-con' >{enterpriseQualification}</View>
                 <Image className='drop-down-icon' src={right}/>
               </View>
             </Picker>
           </View>
           <View className='input-group '>
             <View className='input-name'>纳税类型</View>
             <Picker className='input-picker' name={'taxTypes'} mode='selector' range={taxTypesArr} onChange={this.changePicker.bind(this,'taxTypes')}>
               <View className='tt'>
                 <View className='from-input picker-con' >{taxTypes}</View>
                 <Image className='drop-down-icon' src={right} />
               </View>
             </Picker>
           </View>
           <View className='input-group'>
             <View className='input-name'>企业地址</View>
             <Input className='from-input' name={'enterpriseAddress'} placeholderClass='placeholder_class' placeholder='请填写企业地址' />
           </View>
         </View>

         <View className='input-group'>
           <Textarea className='from-textarea' name={'remarks'} placeholderClass='placeholder-class'
                     placeholder='请填写相关的备注内容' maxlength={-1} />
         </View>
         <View className='interval' />

         <View className='item-group pt0 pb0'>
           <View className='input-group'>
             <View className='input-name is-require'>联系人</View>
             <Input className='from-input' name={'contactsName'} placeholderClass='placeholder_class' placeholder='请填写联系人' />
           </View>
           <View className='input-group'>
             <View className='input-name is-require'>联系电话</View>
             <Input className='from-input' type="number" maxLength={11} name={'phoneNumnber'} placeholderClass='placeholder_class' placeholder='请填写联系电话' />
           </View>
           <View className='input-group'>
             <View className='input-name'>微信号</View>
             <Input className='from-input' name={'wechatNumber'} placeholderClass='placeholder_class' placeholder='请填写微信号' />
           </View>
           <View className='input-group'>
             <View className='input-name'>QQ号</View>
             <Input className='from-input' type={"number"} maxLength={11} name={'qqNumber'} placeholderClass='placeholder_class' placeholder='请填写QQ号' />
           </View>
         </View>

         <Button className='page-submit' formType="submit">立即发布</Button>
       </Form>

        <PageFooterInfo />

      </View>
    )
  }
}

export default Page3
